<template>
  <div class="form_item-log_list">
    <input v-if="!is_info" type="hidden" :name="name" :value="value">
    <el-timeline>
      <el-timeline-item v-for="(item,i) in this_value" :key="i" placement="top" :timestamp="item.time">
        <el-descriptions :column="1" border>
          <el-descriptions-item width="50" v-if="item.status" label="状态">{{item.status}}</el-descriptions-item>
          <el-descriptions-item width="50" label="备注">
            <text_more :value="item.content" is_info="1"></text_more>
          </el-descriptions-item>
          <el-descriptions-item width="50" v-if="item.files" label="附件">
            <file_imgs :value="item.files" is_info="1"></file_imgs>
          </el-descriptions-item>
        </el-descriptions>
      </el-timeline-item>
    </el-timeline>
    <div v-if="!is_info" class="flex" style="width: 100%;justify-content: flex-end;background: #fff;">
      <el-button type="primary" @click="show_add=true">添加记录</el-button>
    </div>

    <el-dialog v-model="show_add" title="添加进度" width="80%">
      <forms ref="forms" :config="add_config" remove_name="1" @submit:forms="onadd"></forms>
    </el-dialog>
  </div>
</template>

<script>
import s94Mjs from "s94-js";
import {_config} from "@/js/s94_tool.js";
import text_more from "@/components/auto_import/UnifyParam/text_more.vue";
import file_imgs from "@/components/auto_import/UnifyParam/file_imgs.vue";

export default {
  _title_: '日志',
  _can_form_param_: true,
  components: {text_more,file_imgs},
  name: "log_list",
  props: ['name', 'value', 'config', 'is_info', "desc", 'size', 'is_list'],
  emits: ['update:value', 'change'],
  data(){
    let app = this;
    let status_config = _config("page.text.model_project_log_status_map", "进行中,已完成")
    let add_config = {
      time: {label:'时间',name:'time',type:'date',config:'',value:'', remove:1},
      status: {label:'状态',name:'status',type:'select_one',config:status_config,value:"",validate:["required"],tips:"选择列表可以在 [系统配置->案件进度的状态列表] 进行配置", remove:1},
      content: {name:'content', label:'进度详情', type:'text_more', value: "",validate:["required"], size:this.size},
      files: {label:'附件',name:'files',type:'file_imgs',tips:'',value:'', remove:1}
    };
    let need_param = s94Mjs.to_string(this.config).split(",");
    if (~need_param.indexOf("time")) add_config["time"]["remove"] = 0;
    if (~need_param.indexOf("status")) add_config["status"]["remove"] = 0;
    if (~need_param.indexOf("files")) add_config["files"]["remove"] = 0;
    return {
      show_add: false,
      need_display: true,
      this_value: this.get_list(),
      add_config: add_config,
    }
  },
  methods: {
    get_list(){
      let res = [];
      try {
        res = (this.value ? Object.values(JSON.parse(this.value)) : []);
      } catch (e) {}
      res.sort((a, b)=>{
        let res = 0;
        if (this.desc){
          res = a.time < b.time ? 1 : -1;
        }else {
          res = a.time > b.time ? 1 : -1;
        }
        return res;
      });
      return res;
    },
    ondelete(i){
      this.this_value.splice(i,1);
      this.update_value();
    },
    onadd(){
      if (!this.add_config.content.value) return this.$msgbox({message:'进度详情不能为空'});
      let row = {
        time: this.add_config.time.value,
        content: this.add_config.content.value,
        status: this.add_config.status.value,
        files: this.add_config.files.value,
      };
      if (this.add_config.time.remove) row["time"] = s94Mjs.date('Y-M-D H:I:S');
      let added = false;
      for (let i = 0; i < this.this_value.length; i++) {
        let added = (this.desc&&row.time > this.this_value[i].time) || (!this.desc&&row.time < this.this_value[i].time);
        if (added) {
          this.this_value.splice(i,0,row);
          break;
        }
      }
      if (!added) this.this_value.push(row);
      this.$refs['forms'].init();
      this.show_add = false;
      this.update_value();
    },
    update_value(){
      this.need_display = false;
      setTimeout(()=>{this.need_display = true;},5);
      let v = JSON.stringify(this.this_value);
      this.$emit('update:value', v);
      this.$emit('change', v);
    },
  },
  watch: {
    value(){
      if (!this.need_display) return;
      this.this_value = this.get_list();
    }
  },
  computed: {
  },
  mounted() {
  }
}
</script>

<style scoped>

</style>